<template>
  <div>
    <el-card class="goods-list" shadow="hover">
      <div class="toAudition">
        <div class="btn" @click="ToAuditing()">查看待审核用户</div>
      </div>
      <el-table :data="pagedUserData" style="width: 100%" :row-class-name="rowClassName" :default-sort="{prop: 'createTime', order: 'descending'}">
        <el-table-column prop="id" label="用户ID"></el-table-column>
        <el-table-column prop="username" label="用户名"  sortable :sort-method="customSort" :formatter="formatUsername"></el-table-column>
        <el-table-column prop="sex" label="性别" :formatter="formatSex"></el-table-column>
        <el-table-column prop="birthday" label="生日" :formatter="formatBirthday"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" :formatter="formatIdCard"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="serviceTime" label="服务时长"></el-table-column>
        <el-table-column prop="money" label="余额"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :total="userData.length"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
      />
    </el-card>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" width="30%" center>
      <el-form ref="usersForm" :model="currentUsers" label-width="80px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model.number="currentUsers.username" placeholder="用户未实名"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="currentUsers.idCard" placeholder="用户未实名"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="currentUsers.birthday" type="date" placeholder="选择生日" style="width: 100%;" @change="formatData"></el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="currentUsers.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <!-- 如果还有其他选项，可以继续添加 -->
          </el-radio-group>
        </el-form-item>
<!--        再加一个type字段-->
          <el-form-item label="身份">
            <el-select v-model="currentUsers.money" placeholder="请选择身份">
              <el-option label="普通用户" value="0"></el-option>
              <el-option label="老人" value="1"></el-option>
              <el-option label="交易管理者" value="2"></el-option>
              <el-option label="志愿管理者" value="3"></el-option>
            </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {queryAllUser,updateUserByAdmin} from '../../api/index'
export default {
  data() {
    return {
      userData: [],
      pageSize: 20,
      currentPage: 1,
      dialogFormVisible:false,
      currentUsers:{}
    };
  },
  mounted() {
    this.getAllUser()
  },
  computed: {
    // 分页后的用户数据
    pagedUserData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.userData.slice(startIndex, endIndex);
    }
  },
  methods: {
    customSort(a, b) {
      // 判断用户名是否为 "请上传身份证"，如果是的话，将其排在最前面
      if (a.username === '请上传身份证' && b.username !== '请上传身份证') {
        return -1;
      } else if (a.username !== '请上传身份证' && b.username === '请上传身份证') {
        return 1;
      } else {
        // 如果用户名不是 "请上传身份证"，则按字母顺序排序
        return a.username.localeCompare(b.username);
      }
    },
    formatUsername(row){
      return row.username!=='请上传身份证' ? row.username : "未实名";
    },
    formatSex(row) {
      return row.sex!=='请上传身份证' ? row.sex : "未实名";
    },
    formatBirthday(row) {
      return row.birthday!=='请上传身份证' ? row.birthday : "未实名";
    },
    formatIdCard(row) {
      return row.idCard!=='请上传身份证' ? row.idCard : "未实名";
    },
    formatData(value) {
      const date = new Date(value);
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      this.currentUsers.birthday = `${year}-${month}-${day}`;
    },
    handleEdit(row){
      this.currentUsers = {...row}
      this.dialogFormVisible = true
    },
    confirmEdit(){
      // console.log(this.currentUsers)
      updateUserByAdmin(this.currentUsers).then(res=>{
        console.log(res)
        this.getAllUser()
        this.$message.success("修改用户信息成功")
      })
      this.dialogFormVisible = false
    },
    //检测是否有实名
    rowClassName({ row }) {
      if (row.username =='请上传身份证' ) {
        return 'error-row'; // 如果满足条件，则返回空字符串
      }
      return 'success-row';  // 返回自定义类名
    },
    // 处理分页变化
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getAllUser(){
      queryAllUser().then(res=>{
        this.userData = res.data
      })
    },
    ToAuditing(){
      this.$router.push('/audition');
    }
  }
};
</script>

<style>
.el-table .success-row {
  background-color: rgba(245, 250, 252, 0.78);
}

.el-table .error-row  {
  background-color: rgba(255, 243, 243, 0.67);
}
.toAudition{
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  .btn{
    border: 1px solid #7e7777;
    margin-bottom: 5px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    text-align: center;
    cursor:pointer;
  }
}
</style>
